<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">

          <div class="filtr-inline">
            <span>公司名：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>
    <Modal v-model="show" width="700" title="审核信息">
        <p slot="header" style="text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>审核信息</span>
        </p>

        <Steps :current="row.status - 1" status="success">
            <Step title="未提交" content="提交加盟申请信息"></Step>
            <Step title="进行中" content="正在进行加盟申请审核"></Step>
            <Step title="审核完成" content="审核结果"></Step>
        </Steps>

        <div class="bgd-cotent">
            <div class="bgd-row">
                <div>
                    <h3>基本信息</h3>
                    <div class="row">
                        <span>公司名称：</span><p>{{row.name}}</p>
                    </div>
                    <div class="row">
                        <span>加盟费：</span><p>{{row.franchise}}元</p>
                    </div>
                    <div class="row">
                        <span>到期时间：</span><p>{{row.expire}}</p>
                    </div>
                </div>

                <div>
                  <h3>联系信息</h3>
                    <div class="row">
                        <span>姓名：</span><p>{{row.lxname}}</p>
                    </div>
                    <div class="row">
                        <span>职位：</span><p>{{row.position}}元</p>
                    </div>
                    <div class="row">
                        <span>手机：</span><p>{{row.mobile}}</p>
                    </div>
                    <div class="row">
                        <span>邮件：</span><p>{{row.email}}</p>
                    </div>
                    <div class="row">
                        <span>QQ：</span><p>{{row.qq}}</p>
                    </div>
                    <div class="row">
                        <span>地址：</span><p>{{row.address}}</p>
                    </div>
                </div>
            </div>

            <div class="bgd-row">
                <div>
                    <h3>附件信息</h3>
                    <div class="row">
                        <span>附件下载：</span><p><a :href="row.accessory" download="附件">附件</a></p>
                    </div>
                </div>

                <div>
                    <h3>其它信息</h3>
                    <div class="row">
                        <span>录入员工：</span><p>{{row.create_user}}</p>
                    </div>
                </div>
            </div>
            <div>
              <h3>审核意见</h3>
              <Input v-model="yj" 
              type="textarea" 
              :autosize="{minRows: 4,maxRows: 8}" 
              placeholder="意见..." />
            </div>
        </div>

        <div slot="footer" style="text-align:center">
            <Button type="warning" size="large" :loading="rejected" @click="onClickRejected(row.id)">驳回</Button>
            <Button type="success" size="large" :loading="ok" @click="onClickOk(row.id)">通过</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
import { _getList, _checkData } from '@/api/alliance.js'
export default {
  name: 'custCheck',
  data () {
    return {
      type: 0, // 1 == 新增 
      rejected: false,
      ok: false,
      show: false,
      loading: true,
      total: 0,
      id: 0,
      yj: '',
      row: {

      },
      form: {
        status: 2,
        name: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        name: '',
        position: ''
      },
      columns: [
        {
            title: '加盟商',
            key: 'name'
        },
        {
            title: '加盟费',
            key: 'franchise',
            render: (h, params) => {
                return h('div', {}, params.row.franchise + '元')
            }
        },
        {
            title: '到期时间',
            key: 'expire',
            width: 110
        },
        {
            title: 'QQ',
            key: 'qq',
            width: 110
        },
        {
            title: '电话',
            key: 'mobile',
            width: 110
        },
        {
            title: '邮件',
            key: 'email',
            width: 110
        },
        {
          title: '提交人',
          key: 'create_user',
          width: 80
        },
        {
            title: '审核状态',
            key: 'status',
            width: 100,
            render: (h, params) => {
                if (params.row.status == 3){
                    return h('tag', {
                        props: {
                            color: 'error'
                        }
                    }, '未通过')
                }else if (params.row.status == 4){
                    return h('tag', {
                        props: {
                            color: 'success'
                        }
                    }, '已通过')
                }else {
                    return h('tag', {
                        props: {
                            color: 'default'
                        }
                    }, '未审核')
                }
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (h, params) => {
                if (params.row.status == 2){
                    return h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                this.show = true
                                this.id = params.row.id
                                this.row = params.row
                            }
                        }
                    }, '审核')
                }else {
                    return h('div', {
                      props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                
                            }
                        }
                    }, '查看')
                }
            }
        },
      ],
      data: []
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 审核未通过
    onClickRejected (id) {
      if (this.yj == '') {
        this.$Message.info('请填写审核意见')
        return
      }
      this.rejected = true
      this.checkData(id, 3, () => {
        this.rejected = false
      })
    },
    // 审核通过
    onClickOk (id) {
      if (this.yj == '') {
        this.$Message.info('请填写审核意见')
        return
      }
      this.ok = true
      this.checkData(id, 4, () => {
        this.ok = false
      })
    },
    checkData (id, value ,callback) {
      _checkData({content: this.yj, id, status: value, user: '审核员'}).then( res => {
        callback()
        this.show = false
        this.getList()
      })
    },
    // 保存数据
    handleSubmit (form) {
      const obj = {}
      Object.assign(obj, this.formBase, {contact: this.contact})
      // 新增
      if (this.type && obj.contact == 0) {
        this.$Message.error('请先填写基本信息')
        return ;
      }else if (obj.name == '' || obj.position == ''){
        this.$Message.error('请先填写姓名或者职位')
        return ;
      }
      this.buttonLoad = true
      _upStaffById(obj).then( res => {
        const obj = res.data
        if (obj.status == 1){
          this.$Message.success(obj.msg)
        }else {
          this.$Message.error(obj.msg)
        }
        this.buttonLoad = false
        this.show = false
        this.getList()
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
  },
}
</script>

<style scoped>
.bgd-cotent h3 {
    margin-top: 30px;
}
.bgd-cotent .row{
    line-height: 40px;
    display: flex;
}
.bgd-cotent .row span {
    width: 80px;
    text-align: right;
    padding-right: 10px;
}
.bgd-row {
    display: flex;
    justify-content: space-between;
}
.bgd-row>div{
    width: 50%;
}
</style>

